<template>
	<view style="height: 100%;">
		<!-- 状态栏 -->
		<view v-if="showHeader" class="status" :style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
		<!-- 顶部导航栏 -->
		<view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<!-- 定位城市 -->
			<view class="addr" @tap="selectAddress">
				<view class="icon location"></view>
				{{ deliveyAddr.address_name }}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<!-- #ifdef APP-PLUS || MP -->
				<icon type="search" :size='13' color='#999'></icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="margin-left: 120rpx;">
					<tui-icon name="search" :size='16' color='red'></tui-icon>
				</view>
				<!-- #endif -->
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
			</view>
			<!-- 右侧图标按钮 -->
			<!-- <view class="icon-btn">
				<view class="icon yuyin-home"></view>
				<view class="icon tongzhi" @tap="toMsg"></view>
			</view> -->
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList">
						<image :src="swiper.pic" @tap="goUrl" :data-url="swiper.url"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
				</view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="swiper-cate">
			<swiper :indicator-dots="true" :interval="3000" :duration="1000" indicator-active-color="#2681f3">
				<swiper-item v-for="(item,idx) in categoryList">
					<view class="category-list">
						<view class="category" v-for="(row, index) in item" :key="index"  @tap="goUrl" :data-url="item.url">
							<view class="img">
								<image :src="row.pic"></image>
							</view>
							<view class="text">{{ row.name }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- <view class="category-list">
			<view class="category" v-for="(row, index) in categoryList[0]" :key="index" @tap="toCategory(row)">
				<view class="img">
					<image :src="row.pic"></image>
				</view>
				<view class="text">{{ row.name }}</view>
			</view>
		</view> -->
		<view class="card" v-for="(item,index) in listdata">
			<view class="left" @tap="gogoodslist(item.cat_id,item.cat_url)" :style="[{background:item.bg_color,color:item.bg_color}]">
				<view class="title">{{item.cat_name}}</view>
				<text class="title1">全部服务</text>
			</view>
			<view class="right">
				<view class="mini-box" @tap="gogoodsdetail(itm.cat_id,itm.cat_url)" :data-url="itm.url" v-for="(itm,idx) in item.category_list">
					<view class="mini-icon">
						<image :src="itm.cat_pic" mode="" class="mini-img"></image>
					</view>
					<text class="title2">{{itm.cat_name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 优惠券弹窗 -->
		<view class="shalanheiyo" style="height: 100%;" :hidden="coupon_list.length === 0 || !showCoupon">
			<view class="coupon-box">
				<image class="top-img" src="https://hf.pigcms.com/static/new_shop/sn_coupon11.png" mode="widthFix"></image>
				<view class="detail">
					<scroll-view class="ticket" :style="'height:' + imageHeight.ticket + 'px'" scroll-y="true">
						<view class="item" v-for="(item, index) in coupon_list" :key="index">
							<image src="https://hf.pigcms.com/static/new_shop/sn_coupon2.png" mode="widthFix" id="ticketItem"></image>
							<view class="desc">
								<view class="num">
									<view class="red">{{item.title_money}}</view>
									<view class="font12">{{item.title_des}}</view>
								</view>
								<view class="limit">
									<view>{{item.name}}</view>
									<view class="font12 red">{{item.days}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<button @click.stop="closeMask">
						<lang keywords="去下单"></lang>
					</button>
				</view>
		
				<view class="close-icon">
					<text class="iconfont icon-cha" @click.stop="closeMask"></text>
				</view>
			</view>
		</view>
		
		<view class="locationBtn" :hidden="!showLocationBtn">
			<view>
				<image src="../../static/images/sn_locate.png"></image>
				<view class="desc">
					<lang keywords="需要获取您的当前位置"></lang>
				</view>
				<button open-type="openSetting" bindopensetting="openSetting">
					<lang keywords="开启位置权限"></lang>
				</button>
			</view>
		</view>
		<!-- <view>
			<button type="primary">跑腿</button>
		</view> -->
		
		<tabbar class="tabbar" :tabbar="tabbar"></tabbar>
	</view>
</template>

<script>
	import tuiIcon from "../../appComponent/uni/icon/icon.vue"
	import tuiTag from "./component/tag/tag.vue"
	var common = require('../../utils/common.js');
	var head = require('../../utils/customHead.js');
	var app = getApp();
	var _this;
	var ttt = 0;
	const getIndexlist = () => {
		common.post('Appoint_new&a=index_new', {}, data => {
			console.log("nnnnnnn", data)
			_this.swiperList = data.index_top_adver;
			_this.categoryList = data.index_slider;
			_this.listdata = data.category_list;
			getCoupon()
		});
	}
	// 优惠券
	const getCoupon = () => {
		uni.getStorage({
			key: 'ticket',
			success: (res) => {
				common.post('Home&a=rand_coupon', {
					cate_name: 'appoint'
				}, data => {
						console.log('优惠券', data);
	
						if (data.coupon.length > 0) {
							// 获取优惠券的高度
							var length = data.coupon_count;
							
							if (length > 3) {
								length = 3;
								_this.imageHeight.ticket = _this.systemInfo.windowWidth * 0.8 * 0.9 * 150 / 536 * length + length * 10 +
									10;
							} else {
								_this.imageHeight.ticket = _this.systemInfo.windowWidth * 0.8 * 0.9 * 150 / 536 * length + length * 10;
							}
	
							_this.setData({
								imageHeight: _this.imageHeight,
								coupon_list: data.coupon
							});
							console.log("coupon_list",_this.coupon_list)
						}
					});
			}
		});
	};
	const getAuthorization = () => {
		// #ifdef H5
		village_LBS();
		// #endif
		
		// #ifdef MP-WEIXIN
		wx.getSetting({
			success: res => {
				if (res.authSetting['scope.userLocation'] && res.authSetting['scope.userLocation'] == false) {
					//非初始化进入该页面,且未授权
					wx.hideLoading();
	
					_this.showLocationBtn = true
				} else {
					// 初始化或已授权
					_this.showLocationBtn = false
	
					village_LBS();
				}
			}
		});
		// #endif
	};
	const village_LBS = () => {
		console.log('定位village_LBS')
		common.locationFun(function(res){
			if (res.lng || res.lat) {
				console.log('定位成功village_LBS', res)
				// 调用接口, 请求广告数据
				common.location_report(res.lng, res.lat, 'gcj02');
				_this.lng = res.lng
				_this.lat = res.lat
				// getAdInfo();
			} else {
				console.log('定位失败village_LBS', res)
				// #ifdef MP-WEIXIN
				wx.hideLoading();
				_this.showLocationBtn = true
				_this.showLocationBtn = true
				// #endif
				
				// #ifdef H5
				// getAdInfo();
				// #endif
			}
		}, _this, '')
	};
	const addressinfo = () => {
		_this.deliveyAddr = app.globalData.delivery_address;
		console.log("当前地址的信息",_this.deliveyAddr)
		if(_this.deliveyAddr){
			_this.deliveyAddr = app.globalData.delivery_address;
		}else{
			_this.deliveyAddr = {address_name: '北京'};
		}
	}
	export default {
		components: {
			tuiIcon,
			tuiTag,
		},
		data() {
			return {
				tabbar: {},
				listdata:[],
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				currentSwiper: 0,
				// 轮播图片
				swiperList: [],
				// 分类菜单
				categoryList: [],
				Promotion: [],
				coupon_list: [],
				// 优惠券
				showCoupon: true,
				// 显示优惠券弹层
				showLocationBtn: false,
				// 显示定位按钮
				systemInfo: '',
				imageHeight: {
					ticket: 0,
				},
				deliveyAddr: '',// 地址name
			};
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			// let len = this.productList.length;
			// if (len >= 40) {
			// 	this.loadingText = '到底了';
			// 	return false;
			// }
			// 演示,随机加入商品,生成环境请替换为ajax请求
			// let end_goods_id = this.productList[len - 1].goods_id;
			// for (let i = 1; i <= 10; i++) {
			// 	let goods_id = end_goods_id + i;
			// 	let p = {
			// 		goods_id: goods_id,
			// 		img:
			// 			'/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
			// 		name: '商品名称商品名称商品名称商品名称商品名称',
			// 		price: '￥168',
			// 		slogan: '1235人付款'
			// 	};
			// 	this.productList.push(p);
			// }
		},
		onShow() {
			common.editTabbar({}, function(data) {
				console.log('index.vue onShow', data)
				_this.tabbar = data;
			});
		},
		mounted() {
			// 在组件实例进入页面节点树时执行
			_this = this; 
			// app.checkIsHome('/'+_this.route)
			app.globalData.isPay = false;
			wx.showLoading({
				title: '加载中',
				mask: true
			});
			
			var systemInfo = uni.getSystemInfoSync();
			console.log("设备的高度",systemInfo)
			var navigationBarStyle = head.getNavigationBarStyle(_this, systemInfo);
			_this.systemInfo = systemInfo
		
			// 获取设备信息及各种图片高度
			// getHeight(); 
			// 设置头部主颜色
			getIndexlist()
			
		},
		beforeUpdate(){
			addressinfo()
			uni.$on('addressinfo', function(data){
				console.log('监听到事件来自 getIndexlist',  data);
				if(data > 1) {
					addressinfo()
				}
			})
		},
		// onLoad() {
		// 	_this = this
		// 	// #ifdef APP-PLUS
		// 	this.nVueTitle = uni.getSubNVueById('homeTitleNvue');
		// 	this.nVueTitle.onMessage(res => {
		// 		let type = res.data.type;
		// 		if (type == 'focus') {
		// 			this.toSearch();
		// 		}
		// 	});
		// 	this.showHeader = false;
		// 	this.statusHeight = plus.navigator.getStatusbarHeight();
		// 	// #endif
		// 	console.log("地址",_this.deliveyAddr)
		// 	getAuthorization();
		// 	getIndexlist()
		// },
		methods: {
			gogoodsdetail(cat_id,cat_url) {
				uni.navigateTo({
					url: '/pages/appoint/goods/goodsList?cat_url=' + cat_url
				})
			},
			openSetting(e) {
				if (e.detail.authSetting['scope.userLocation'] != undefined && e.detail.authSetting['scope.userLocation'] == true) {
					//请求数据
					_this.setData({
						showLocationBtn: false
					});
			
					village_LBS();
				}
			},
			//加载Promotion 并设定倒计时,,实际应用中应该是ajax加载此数据。
			loadPromotion() {
				let cutTime = new Date();
				let yy = cutTime.getFullYear(),
					mm = cutTime.getMonth() + 1,
					dd = cutTime.getDate();
				let tmpcountdown = yy + '/' + mm + '/' + dd + ' 23:59:59';
				let tmpPromotion = [{
						title: '整点秒杀',
						ad: '整天秒杀专区',
						img: '/static/img/s1.jpg',
						countdown: false
					},
					{
						title: '限时抢购',
						ad: '每天23点上线',
						img: '/static/img/s2.jpg',
						countdown: tmpcountdown
					} //countdown为目标时间，程序会获取当前时间倒数
				];
				//检查倒计时
				for (let i = 0; i < tmpPromotion.length; i++) {
					let row = tmpPromotion[i];
					if (row.countdown) {
						let h = '00',
							m = '00',
							s = '00';
						let currentTime = new Date();
						let cutoffTime = new Date(tmpcountdown);
						if (!(currentTime >= cutoffTime)) {
							let countTime = parseInt(
								(cutoffTime.getTime() - currentTime.getTime()) / 1000
							);
							h = parseInt(countTime / 3600);
							m = parseInt((countTime % 3600) / 60);
							s = countTime % 60;
							h = h < 10 ? '0' + h : h;
							m = m < 10 ? '0' + m : m;
							s = s < 10 ? '0' + s : s;
						}
						tmpPromotion[i].countdown = {
							h: h,
							m: m,
							s: s
						};
					}
				}
				this.Promotion = tmpPromotion;
			},
			//定时器
			Timer() {
				setInterval(() => {
					if (this.Promotion.length > 0) {
						for (let i = 0; i < this.Promotion.length; i++) {
							let row = this.Promotion[i];
							if (row.countdown) {
								if (
									!(
										row.countdown.h == 0 &&
										row.countdown.m == 0 &&
										row.countdown.s == 0
									)
								) {
									if (row.countdown.s > 0) {
										row.countdown.s--;
										row.countdown.s =
											row.countdown.s < 10 ?
											'0' + row.countdown.s :
											row.countdown.s;
									} else if (row.countdown.m > 0) {
										row.countdown.m--;
										row.countdown.m =
											row.countdown.m < 10 ?
											'0' + row.countdown.m :
											row.countdown.m;
										row.countdown.s = 59;
									} else if (row.countdown.h > 0) {
										row.countdown.h--;
										row.countdown.h =
											row.countdown.h < 10 ?
											'0' + row.countdown.h :
											row.countdown.h;
										row.countdown.m = 59;
										row.countdown.s = 59;
									}
									this.Promotion[i].countdown = row.countdown;
								}
							}
						}
					}
				}, 1000);
			},
			//消息列表
			toMsg() {
				uni.navigateTo({
					url: '../../msg/msg'
				})
			},
			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url: '/pages/appoint/goods/search'
				})
			},
			//分类跳转
			goUrl: function(e) {
				console.log('----------------------');
				console.log(e);
			
				if (e.type == 'submit') {
					common.upFormid(e);
				}
			
				if (e.currentTarget.dataset.goodsid) {
					goodsReport(e.currentTarget.dataset.goodsid);
				}
			
				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title;
				var url = e.currentTarget.dataset.url;
			    
				if(url == ''){
					return;
				}
			    if (_this.village_id) {
			        url = common.changeURLArg(url, 'village_id', _this.village_id);
			    }
				
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
			
				if (!pageTitle) {
					pageTitle = '';
				}
				console.log('nums', nums)
				console.log('url_0', url)
				if (nums) {
					common.post('Login&a=house_adver_click', {
						adver_id: nums
					}, function(e) {
						common.parseUrl(url, '', false, pageTitle);
					});
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			},
			//推荐商品跳转
			toPromotion(e) {
				uni.showToast({
					title: e.title,
					icon: 'none'
				});
			},
			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.goods_id,
					icon: 'none'
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//商品列表页
			gogoodslist(cat_id,cat_url) {
				uni.navigateTo({
					url: '/pages/appoint/goods/goodsList?cat_id=' + cat_id + '&cat_url=' + cat_url
				})
			},
			closeMask() {
				_this.category_fir_index = _this.category_fir_index_old 
				console.log('关闭弹窗222',  _this.category_fir_index)
				_this.showMask = false
				_this.showCoupon = false
			},
			//选择地址
			selectAddress(){
				uni.navigateTo({
					url: '/pages/shop_new/selectAddress/selectAddress'
				})
			},
			setData: function(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
			
						data = data[key2];
					});
				});
			},
		}
	};
	// 获取设备信息及图片高度
	const getHeight = () => {
		var systemInfo = _this.systemInfo; // 顶部轮播图片高640*240
	
		_this.imageHeight.topSwiper = 240 * systemInfo.windowWidth / 640; // 单张图片广告750*230
	
		_this.imageHeight.advert_one = systemInfo.windowWidth * 230 / 750; // 三图 左280*270 右280*135 
	
		_this.imageHeight.three.left = (systemInfo.windowWidth - 20) / 2 * 270 / 280;
		_this.imageHeight.three.right = ((systemInfo.windowWidth - 20) / 2 - 5) * 135 / 280; // 四图 350*240
	
		_this.imageHeight.five.top = ((systemInfo.windowWidth - 20) / 2 - 2.5) * 240 / 350; // 五图 上350*240 下230*260
	
		_this.imageHeight.five.bottom = ((systemInfo.windowWidth - 20) / 3 - 3.3333) * 260 / 230; // 为您优选大图 680*480
	
		_this.imageHeight.preference = (systemInfo.windowWidth - 30) / 2 * 480 / 680; // 小图轮播 696*181
	
		_this.imageHeight.bottomSwiper = (systemInfo.windowWidth - 20) * 181 / 696;
	
	};
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.pullDown-effects {
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		image {
			width: 100%;
			height: 36vw;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;

		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */

		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 20upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}

		.input-box {
			width: 80%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				height: 28upx;
				font-size: 28upx;
			}
		}

		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 30.7vw;

			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 30.7vw;
				swiper-item {
					image {
						width: 100%;
						height: 30.7vw;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	.category-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		// border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.category {
			width: 20%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}

	.banner {
		width: 92%;
		margin: 40upx 4%;

		image {
			width: 100%;
			height: 20vw;
			border-radius: 10vw;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
		}
	}

	.card {
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
	}

	.left {
		padding: 20rpx;
		// background: #007AFF;
		width: 30%;
	}

	.title {
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
		color: #FFFFFF;
	}

	.title1 {
		font-size: 20rpx;
		line-height: 26rpx;
		border-radius: 15rpx;
		background: rgba(255,225,223,0.8);
		padding: 0rpx 5rpx;
		margin-top: 20rpx;
	}

	.title1:after {
		content: '>';
		font-size: 20rpx;
		line-height: 26rpx;
	}

	.right {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 70%;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		border: 1rpx solid #F1F1F1;
	}

	.mini-box {
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 41%;
	}

	.mini-box:nth-child(odd) {
		border-right: 1rpx solid #F1F1F1;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.mini-box:nth-child(even) {
		border-bottom: 1rpx solid #F1F1F1;
	}

	.mini-icon {
		width: 35rpx;
		height: 35rpx;
		display: flex;
		flex-shrink: 0;
	}

	.mini-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.title2 {
		font-size: 24rpx;
		font-weight: 700;
		display: flex;
		flex: 8;
		justify-content: center;
		align-items: center;
		line-height: 30rpx;
	}
	.swiper-cate {
		swiper {
			width: 100%;
			height: 50vw;
		
			swiper-item {
				width: 100%;
				height: 50vw;
			}
		}
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.shalanheiyo {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		height: 0;
		z-index: 999999;
	}
	.coupon-box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 4;
		width: 80%;
	}
	
	.coupon-box .top-img {
		width: 100%;
		display: block;
		height: auto;
	}
	
	.coupon-box .detail {
		width: 100%;
		background: #fc3e2d;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-radius: 0 0 5px 5px;
	}
	
	.coupon-box .detail image {
		width: 100%;
		display: block;
		height: auto;
	}
	
	.coupon-box .detail .item {
		margin: 0 auto 10px;
		position: relative;
		width: 90%;
	}
	
	.coupon-box .detail .item .desc {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
		font-size: 16px;
		color: #333;
	}
	
	.coupon-box .detail .item .desc .num {
		flex: 1;
	}
	
	.coupon-box .detail .item .desc .limit {
		flex: 2;
		margin-left: 20px;
	}
	
	.coupon-box .detail .item .desc .font12 {
		font-size: 12px;
		color: #666;
	}
	
	.coupon-box .detail .item .desc .font16 {
		font-size: 18px;
	}
	
	.coupon-box .detail .item .desc .red {
		color: #ff3e4a
	}
	
	.coupon-box .detail .item .desc .num .red {
		font-weight: bold;
	}
	
	.coupon-box .detail button {
		font-size: 16px;
		color: #410509;
		background: #ffda31;
		border-radius: 30px;
		width: 90%;
		margin: 5px auto 0;
	}
	
	button::after {
		border: none;
	}
	
	.coupon-box .close-icon {
		text-align: center;
		color: #fff;
		margin-top: 20rpx;
	}
	
	.coupon-box .close-icon .icon-cha {
		font-size: 60rpx;
	}
	/* 定位按钮 */
	.locationBtn {
		background: #fff;
		width: 100%;
		height: 100%;
	}
	
	.locationBtn>view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-size: 16px;
		color: #999;
	}
	
	.locationBtn image {
		width: 280rpx;
		height: 280rpx;
	}
	
	.locationBtn .desc {
		padding: 20px;
	}
	
	.locationBtn button {
		background: #06c1ae;
		color: #fff;
		font-size: 16px;
		width: 400rpx;
		border-radius: 2px;
	}
</style>
